import {
  Button,
  Card,
  Divider,
  Form,
  Tag,
  Modal,
  Table
} from 'antd';
import React, { Component, Fragment } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import styles from '../../list/table-list/style.less';
import { ADMIN_NAME } from '../../../utils/constants';
import ProjectInfoForm from '@/pages/project/components/ProjectInfoForm';

const entityNameSpace = 'proproject';
@connect(({ proproject, loading }) => ({
  proproject,
  loading: loading.models.proproject,
}))
class ProjectManager extends Component {
  ProjectInfoForm; // 项目详情

  state = {
    modalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},

    current: 1,
    pageSize: 12,
    sorter: '',
  };

  columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      render: (text,record) => <a href={`/project/project-config?projectId=${record.id}`}>{text}</a>,
    },
    {
      title: '服务类型', // micro:微服务，simple:单应用
      dataIndex: 'proType',
      render: text => (text === 'micro' ? <Tag color="green">微服务</Tag> : <Tag color="blue">单应用</Tag>),
    },
    {
      title: 'ArtifactId',
      dataIndex: 'artifactId',
    },
    {
      title: 'GroupId',
      dataIndex: 'groupId',
    },
    {
      title: 'version',
      dataIndex: 'version',
      render: text => <Tag color="blue">{text}</Tag>,
    },
    {
      // 修改 生成 删除
      title: '操作',
      render: (text, record) => (
        <Fragment>
          <a
            onClick={() => {
              this.ProjectInfoForm.handleModalVisible(true, this.handleReloadTableList, record.id);
            }}
          >
            修改
          </a>
          <Divider type="vertical" />
          <a>生成</a>
          <Divider type="vertical" />
          {ADMIN_NAME !== record.username ? (
            <a onClick={this.handleRemoveEntity.bind(this, record)}>删除</a>
          ) : (
            ''
          )}
        </Fragment>
      ),
    },
  ];

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: `${entityNameSpace}/queryAllRoleList`,
    });
    this.handleReloadTableList();
  }



  handleReloadTableList = () => {
    const { dispatch } = this.props;
    const { formValues, current, pageSize, sorter } = this.state;

    const params = {
      current,
      pageSize,
      ...formValues,
      sorter,
    };

    dispatch({
      type: `${entityNameSpace}/queryEntityPageList`,
      payload: params,
    });
  };


  handleEntityFormModalVisible = (flag, entityId) => {
    this.setState({
      modalVisible: !!flag,
    });

    if (flag === true) {
      const { dispatch } = this.props;
      dispatch({
        type: `${entityNameSpace}/queryAllRoleList`,
      });

      if (entityId) {
        dispatch({
          type: `${entityNameSpace}/detailEntity`,
          payload: entityId,
        });
      } else {
        dispatch({
          type: `${entityNameSpace}/changeDetailEntity`,
          payload: {},
        });
      }
    }
  };

  handleEntityUpdate = fieldsValue => {
    const {
      dispatch,
      [entityNameSpace]: { entityInfoObj },
    } = this.props;

    let formData = fieldsValue;
    if (entityInfoObj.id) {
      formData = { ...fieldsValue, id: entityInfoObj.id };
    }

    dispatch({
      type: `${entityNameSpace}/updateEntity`,
      payload: formData,
      callback: () => {
        this.handleEntityFormModalVisible();
        this.handleReloadTableList();
      },
    });
  };

  handleRemoveEntity = record => {
    const { dispatch } = this.props;

    Modal.confirm({
      title: '确认',
      content: '是否确认删除',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: `${entityNameSpace}/removeEntity`,
          payload: record.id,
          callback: () => {
            this.handleReloadTableList();
          },
        });
      },
    });
  };

  render() {
    const {
      [entityNameSpace]: { entityPageResult, entityInfoObj },
      loading,
    } = this.props;
    const {  modalVisible } = this.state;
    const parentMethods = {
      handleEntityUpdate: this.handleEntityUpdate,
      handleEntityFormModalVisible: this.handleEntityFormModalVisible,
      entityInfoObj,
    };

    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              <Button
                icon="plus"
                type="primary"
                onClick={() =>
                  this.ProjectInfoForm.handleModalVisible(true, this.handleReloadTableList)
                }
              >
                新建
              </Button>
            </div>
            <Table
              rowKey="id"
              bordered={false}
              onRow={false}
              cellspaceing={50}
              dataSource={entityPageResult.list}
              columns={this.columns}
              loading={loading}
            />
          </div>
        </Card>
        <ProjectInfoForm
          onRef={ele => {
            this.ProjectInfoForm = ele;
          }}
          {...parentMethods}
          modalVisible={modalVisible}
        />
      </PageHeaderWrapper>
    );
  }
}

export default Form.create()(ProjectManager);
